<template>
  <div class="page_main">
    <LeiBreadCrumb :activePath="activePath"></LeiBreadCrumb>
    <el-card>
      <div class="nav">
        <div class="nav_left">
          <el-input
            placeholder="请输入内容"
            prefix-icon="el-icon-search"
            v-model="keyword"
          >
          </el-input>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
          <el-button icon="el-icon-search">重置</el-button>
        </div>
        <div class="nav_right">
          <el-button type="primary" icon="el-icon-plus">新建</el-button>
          <el-button icon="iconfont icon-shuaxin"> 刷新</el-button>
          <el-button icon="el-icon-setting">设置</el-button>
        </div>
      </div>
      <div class="main">
        <lei-table
          :tableData="tableData"
          :columns="columns"
          :pageObj="pageObj"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
          clear
          del
          :select="true"
        >
          <el-table-column slot="status" label="状态" align="center">
            <template slot-scope="scope">
              <el-button type="default">默认</el-button>
              <el-button type="primary">设置</el-button>
            </template>
          </el-table-column>
          <el-table-column slot="operation" label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="default">默认</el-button>
              <el-button type="primary">设置</el-button>
            </template>
          </el-table-column>
        </lei-table>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activePath: {
        path: '',
        title: '工艺与产线',
      },
      keyword: '',
      pageObj: {
        pageNum: 1,
        pageSize: 10,
        total: 100,
      },
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          children: [
            {
              id: 31,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
            {
              id: 32,
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄',
            },
          ],
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      tableData1: [
        {
          id: 1,
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄',
        },
        {
          id: 2,
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄',
        },
        {
          id: 3,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄',
          hasChildren: true,
        },
        {
          id: 4,
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄',
        },
      ],
      columns: [
        { label: '工艺流程', prop: 'date' },
        { label: '模块名称', prop: 'name' },
        { label: '工序编号', prop: 'address' },
        { slot: 'status' },
        { label: '清单层级', prop: 'hobby' },
        { label: '合格判断', prop: 'hobby' },
        { label: '附件条件判断', prop: 'hobby' },
        { label: '下级模块', prop: 'hobby' },
        { label: '扫码', prop: 'hobby' },
        { label: '是否填单', prop: 'hobby' },
        { label: '流程开始', prop: 'hobby' },
        { label: '流程结束', prop: 'hobby' },
        { label: '是否转厂', prop: 'hobby' },
        { label: '备注', prop: 'hobby' },
        { slot: 'operation' },
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;
  .nav_left {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-input {
      margin-right: 10px;
    }
  }
}
</style>